<script lang="ts" setup>
import { useSubjectStore } from '@/stores'
import { Upload } from '@element-plus/icons-vue'
import { ref, onMounted, watch } from 'vue'
const subjectStore = useSubjectStore()
const iseasi = ref(false)
const week = ref(0)
const loading = ref(true)

// await subjectStore.getExperimental(subjectStore.id)

const seteasi = (w) => {
  week.value = w
  iseasi.value = true
}
const addeasi = (week, close) => {
  subjectStore.setEasi(subjectStore.easi[week]).then((code) => {
    if (code) {
      subjectStore.experimental[week].easi = sub(subjectStore.easi[week])
      subjectStore
        .setExperimental(subjectStore.experimental[week])
        .then((code) => {
          if (code) {
            ElMessage.success('成功')
          } else {
            ElMessage.error('失败')
          }
        })
    } else {
      ElMessage.error('失败')
    }
  })
  close()
}
const sub = (data) => {
  let s = 0
  s =
    data.areaHead +
    data.areaUpperLimb +
    data.areaLowerLimb +
    data.areaLowerLimb +
    data.erythemaHead +
    data.erythemaUpperLimb +
    data.erythemaLowerLimb +
    data.erythemaLowerLimb +
    data.scalyScalesHead +
    data.scalyScalesUpperLimb +
    data.scalyScalesLowerLimb +
    data.scalyScalesLowerLimb +
    data.mossyTransformationHead +
    data.mossyTransformationUpperLimb +
    data.mossyTransformationLowerLimb +
    data.mossyTransformationLowerLimb

  return s
}
const setexperimental = () => {
  subjectStore.setExperimental(subjectStore.experimental[0])
  subjectStore.setExperimental(subjectStore.experimental[1])
  subjectStore.setExperimental(subjectStore.experimental[2])
  ElMessage.success('已提交')
}
// const loading = ElLoading.service()
subjectStore.getExperimental(subjectStore.id)
watch(
  () => subjectStore.id,
  () => {
    loading.value = true
    subjectStore.getExperimental(subjectStore.id).then(() => {
      loading.value = false
    })
  },
  { immediate: true }
)
onMounted(() => {})
</script>
<template>
  <el-container v-loading="loading">
    <el-main>
      <el-table :data="[1]" stripe>
        <el-table-column label="项目">IGA评分</el-table-column>
        <el-table-column label="第0周">
          <el-input-number
            v-model="subjectStore.experimental[0].iga"
            :min="0"
            :max="5"
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column label="第2周">
          <el-input-number
            v-model="subjectStore.experimental[1].iga"
            :min="0"
            :max="5"
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column label="第4周">
          <el-input-number
            v-model="subjectStore.experimental[2].iga"
            :min="0"
            :max="5"
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column>
          <template #header>
            <el-button @click="setexperimental">提交</el-button>
          </template>
          <template #default>
            0 无皮损 1 几乎没有皮损 2 轻度皮损 3 中度皮损 4 重度皮损 5 非常严重
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="[1]" stripe>
        <el-table-column>EASI评分</el-table-column>
        <el-table-column>
          <span>{{ subjectStore.experimental[0].easi }}</span>
          <el-link @click="seteasi(0)" style="margin-left: 10px"
            >详细信息</el-link
          >
        </el-table-column>
        <el-table-column>
          <span>{{ subjectStore.experimental[1].easi }}</span>
          <el-link @click="seteasi(1)" style="margin-left: 10px"
            >详细信息</el-link
          >
        </el-table-column>
        <el-table-column>
          <span>{{ subjectStore.experimental[2].easi }}</span>
          <el-link @click="seteasi(2)" style="margin-left: 10px"
            >详细信息</el-link
          >
        </el-table-column>
        <el-table-column> / </el-table-column>
      </el-table>
      <el-table :data="[1]" stripe>
        <el-table-column>NRS评分</el-table-column>
        <el-table-column>
          <el-input-number
            v-model="subjectStore.experimental[0].nrs"
            :min="0"
            :max="5"
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column>
          <el-input-number
            v-model="subjectStore.experimental[1].nrs"
            :min="0"
            :max="5"
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column>
          <el-input-number
            v-model="subjectStore.experimental[2].nrs"
            :min="0"
            :max="5"
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column>
          <template #default>
            无痒(0) 轻度瘙痒(1、2、3) 中度瘙痒(4、5、6) 重度瘙痒(7、8)
            极重度瘙痒(9、10)
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="[1]" stripe>
        <el-table-column>血清总IgE（IU/mL）</el-table-column>
        <el-table-column>
          <el-input-number
            v-model="subjectStore.experimental[0].igE"
            :min="0"
            :max="5"
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column>
          <el-input-number
            v-model="subjectStore.experimental[1].igE"
            :min="0"
            :max="5"
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column>
          <el-input-number
            v-model="subjectStore.experimental[2].igE"
            :min="0"
            :max="5"
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column>/</el-table-column>
      </el-table>
      <el-dialog
        v-model="iseasi"
        @close="
          () => {
            iseasi = false
          }
        "
        append-to-body
      >
        <template #header="{ close, titleId, titleClass }">
          <div style="display: flex; justify-content: space-between">
            <h4 :id="titleId" :class="titleClass">详细评分</h4>
            <el-button @click="addeasi(week, close)" style="margin: auto 0">
              <el-icon style="margin-right: 10px"><Upload /></el-icon>
              提交
            </el-button>
          </div>
        </template>
        <el-table :data="[subjectStore.easi[week]]" stripe>
          <el-table-column>面积评分</el-table-column>
          <el-table-column prop="areaHead" label="头部">
            <el-input-number
              v-model="subjectStore.easi[week].areaHead"
              :min="0"
              :max="6"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column label="上肢">
            <el-input-number
              v-model="subjectStore.easi[week].areaUpperLimb"
              :min="0"
              :max="6"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column label="躯干">
            <el-input-number
              v-model="subjectStore.easi[week].areaTrunk"
              :min="0"
              :max="6"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column label="下肢">
            <el-input-number
              v-model="subjectStore.easi[week].areaLowerLimb"
              :min="0"
              :max="6"
              style="width: 100px"
            />
          </el-table-column>
        </el-table>
        <el-table :data="[subjectStore.easi[week]]" stripe>
          <el-table-column>红斑评分</el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].erythemaHead"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].erythemaUpperLimb"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].erythemaTrunk"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].erythemaLowerLimb"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
        </el-table>
        <el-table :data="[subjectStore.easi[week]]" stripe>
          <el-table-column>水肿评分</el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].edemaHead"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].edemaUpperLimb"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].edemaTrunk"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].edemaLowerLimb"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
        </el-table>
        <el-table :data="[subjectStore.easi[week]]" stripe>
          <el-table-column>鳞屑评分</el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].scalyScalesHead"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].scalyScalesUpperLimb"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].scalyScalesTrunk"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].scalyScalesLowerLimb"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
        </el-table>
        <el-table :data="[subjectStore.easi[week]]" stripe>
          <el-table-column>苔藓样变评分</el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].mossyTransformationHead"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].mossyTransformationUpperLimb"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].mossyTransformationTrunk"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
          <el-table-column>
            <el-input-number
              v-model="subjectStore.easi[week].mossyTransformationLowerLimb"
              :min="0"
              :max="3"
              style="width: 100px"
            />
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-main>
  </el-container>
</template>
